import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yysk_app/model/common_model/banner_list_model.dart';
import 'package:yysk_app/pages/my_webview/my_webview_for_app_page.dart';
import 'package:yysk_app/pages/my_webview/my_webview_page.dart';
import 'package:yysk_app/pages/show_image/show_image_page.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/utils/js_tool.dart';
import 'package:yysk_app/widget/lazy_network_image.dart';

class BannerWidget extends StatefulWidget {
  final List<String> bannerList;
  final List<dynamic> bannerListHome;
  final double? boxHeight;
  final bool? autoPlay;
  final bool? isNetworkImg;
  final bool? isbanner;
  const BannerWidget({
    super.key,
    this.bannerList = const [],
    this.boxHeight = 130,
    this.autoPlay = false,
    this.isNetworkImg = true,
    this.isbanner = false,
    this.bannerListHome = const [],
  });

  @override
  State<BannerWidget> createState() => _BannerWidgetState();
}

class _BannerWidgetState extends State<BannerWidget> {
  final CarouselSliderController _controller = CarouselSliderController();

  int _current = 0;

  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width - 24.px;
    return Stack(
      children: [
        CarouselSlider(
          carouselController: _controller,
          items:
              widget.isbanner == true
                  ? widget.bannerListHome
                      .map((item) => _bannerTabImage(item, width))
                      .toList()
                  : widget.bannerList
                      .map((item) => _tabImage(item, width))
                      .toList(),
          options: CarouselOptions(
            height: widget.boxHeight!.px,
            autoPlay: widget.autoPlay!,
            viewportFraction: 2.0,
            onPageChanged: (index, reason) {
              setState(() {
                _current = index;
              });
            },
          ),
        ),
        Positioned(
          child: widget.isbanner == true ? _bannerIndicator() : _indicator(),
          bottom: 5,
          left: 0,
          right: 0,
        ),
      ],
    );
  }

  Widget _tabImage(String item, double width) {
    return Container(
      width: 375.px,
      height: 375.px,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(0),
        // color: AppColors.fontColorRed,
      ),
      child: LazyImage(
        imageUrl: item,
        width: 375.px,
        height: 375.px,
        boxFit: BoxFit.fitWidth,
        borderRadius: 0,
      ),
    );
  }

  Widget _bannerTabImage(BannerListItem item, double width) {
    return GestureDetector(
      onTap: () {
        consoleLog('String');
        Get.toNamed(
          '${ShowImagePage.path}?title=${item.title}&url=${Uri.encodeComponent('${item.detailImage}')}',
          arguments: {
            'title': item.title,
            'url': Uri.encodeComponent('${item.detailImage}'),
          },
        );
        // if(item.jumpType==1){
        //    Get.toNamed(
        //     "${item.jumpPage}"
        //   );
        // }else{
        //       Get.toNamed('${MyWebViewPage.path}?url=${Uri.encodeComponent('${item.jumpPage}')}',
        //   arguments: {'url':Uri.encodeComponent('${item.jumpPage}')});
        // }
      },
      child: Container(
        width: width,
        height: 132.px,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0)),
        child: LazyImage(
          imageUrl: '${item.bannerImageUrl}',
          width: width,
          height: 132.px,
          boxFit: BoxFit.cover,
          borderRadius: 10,
        ),
      ),
    );
  }

  _indicator() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children:
          widget.bannerList.asMap().entries.map((entry) {
            return GestureDetector(
              onTap: () {
                _controller.animateToPage(entry.key);
              },
              child: Container(
                width: _current == entry.key ? 16 : 6,
                height: 6,
                margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: (Colors.white).withValues(
                    alpha: _current == entry.key ? 1 : 0.4,
                  ),
                ),
              ),
            );
          }).toList(),
    );
  }

  _bannerIndicator() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children:
          widget.bannerListHome.asMap().entries.map((entry) {
            return GestureDetector(
              onTap: () {
                _controller.animateToPage(entry.key);
              },
              child: Container(
                width: _current == entry.key ? 16 : 6,
                height: 6,
                margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: (Colors.white).withValues(
                    alpha: _current == entry.key ? 1 : 0.4,
                  ),
                ),
              ),
            );
          }).toList(),
    );
  }
}
